<template>
	<view class="u-demo">

		<view class="top-view">
			<view class="header-view">
				<!-- 轮播图 -->
				<u-swiper class="bannar" :list="adList" keyName="image" :autoplay="false" circular style="padding: 20rpx 20rpx 0rpx 20rpx;margin-bottom: 20rpx;">
				</u-swiper>
				
				<!-- 菜单 -->
				<view class="menu" style="background-color: #f2f2f2;padding: 15rpx 0;">
					
					<view class="u-p-t-20 u-p-l-30" style="width: 100%;background-color: #FFFFFF;font-size: 38rpx;">{{muneItem.title}}</view>
					
					<view class="u-flex">
						
						<view v-for="(item,index) in muneItem.items" :key="index" class="menu_item" style="background-color: #fff;height: 160rpx;width: 100%;text-align: center; ">
						
							<image class="menu_item_image u-m-t-20" :src="item.pic"
								mode="aspectFill" style="width: 80rpx;height: 80rpx;"></image>
											
							<view class="menu_item_info">{{item.title}}</view>
							
						</view>
					</view>

				</view>
				
			</view>
			
			
			<view class="sticky-content">
				<u-sticky :offset-top="offsetTop" :enable="enable" @fixed="fixed" @unfixed="unfixed">
					<view class="sticky">
						<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
					</view>
				</u-sticky>
			</view>
		</view>

		<view class="listContent">
		
			<view class="list-item" v-for="(item,index) in list" :key="index" @click="clkickNewsItem(item)" :style=" 'height:' + item.itemHeight + 'rpx'">
		
				<view class="list-item-content u-flex u-col-top" >
		
					<view class="list-item-titleContent">
		
						<!-- 标题 -->
						<view class="u-line-3 u-font-32">{{ item._type !='pic_ad'? item.title : item.show_title}}</view>
						
						<!-- 当时广告的时候显示 -->
						<template v-if="item._type =='pic_ad'">
							<image class="u-m-t-15" mode="widthFix" :src="item.pic" style="width: 100%;"></image>
						</template>
						
						<!-- 当时多张图片的时候显示 -->
						<template v-if="item.morePic">
							
							<view class="u-flex"   style="width: 100%;height: 150rpx;margin-top: 20rpx;">
								
								<image v-for="(imageItem,index) in item.pics_arr" :key="index" class="u-m-t-15" :src="imageItem.tburl" mode="a"  style="height: 100%;width: 100%; background-color: #2B85E4;margin: 10rpx;"></image>
		
							</view>
							
						</template>
						
						<!-- ；来源 广告时，不显示 -->
						<template v-if="item._type !='pic_ad'">
							<view class="list-item-bottom u-flex u-row-between">
								<view style="font-size: 16rpx;color: #999999;">
									{{item.from}}
								</view>
								<image v-if="item.mateLable" mode="aspectFill" :src="item.label" style="width: 64rpx;height: 30rpx;"></image>
							</view>
						</template>
					</view>
					
					<!-- 单张图片的时候 -->
					<template v-if="item.singlePic">
						<image class="u-m-l-20" mode="aspectFill" :src="item.pic" style="width: 380rpx;height: 175rpx;"></image>
					</template>
					
				</view>
		
				<view class="u-m-t-20" style="background-color: #f2f2f2;height: 1px;"></view>
		
			</view>
		</view>
		

	</view>
</template>

<script>
	import homeRecommend from '../home/pages/recommend/home-recommend.vue'
	import adListJson from '@/config/api/forum-adList.json'
	import muneItemJson from '@/config/api/form-data.json'
	import listJson from '@/config/api/form-list.json'
	
	import util from '@/common/util.js'

	export default {

		components: {
			homeRecommend
		},

		onLoad() {

			const adList = adListJson
			// this.adList = adList.pic_arr
			
			const muneItem = muneItemJson
			this.muneItem = muneItem.tops[1]
			
			
			const list = listJson.list
			
			for (var i = 0 ;i<= list.length -1 ; i++){
				
				const item = list[i]
				
				// 广告
				if(item._type =='pic_ad'){
					
					item.isAd = true
					item.pic = item.pic_arr[0]['tburl']
					item.itemHeight = "auto"
					
				}else{
			
					// 单张、多张 
					if(item.pics_arr.length == 1){
						
						item.pic = item.pics_arr[0]['tburl']
						
						item.singlePic = true
						item.itemHeight = "220"
						
					}else{
						
						item.morePic = true
						item.itemHeight = "356"
					}
				}
				
				item.mateLable = util.check_is_img(item.label)
			}
			
			this.list = list
			console.log(this.list)  
		},

		data() {
			return {
				offsetTop: 0,
				enable: true,
				tabList: [{
					name: '最新回复'
				}, {
					name: '最新主题'
				}, {
					name: '本周热门',
				}],
				current: 0,
				adList: [{
					"image": "http:\/\/pic.365kl.xyz\/pic\/20201109\/qi_niu_1604887049561_483_403_260.jpg",
					"tburl": "http:\/\/pic.365kl.xyz\/pic\/20201109\/qi_niu_1604887049561_483_403_260.jpg",
					"width": 750,
					"height": 234
				}],
				muneItem: {},
				list: []
			}
		},
		methods: {
			offsetTopChange(index) {
				this.offsetTop = index == 0 ? 0 : index == 1 ? 120 : 200;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
			},
			enableChange(index) {
				this.enable = index == 0 ? true : false;
			},
			fixed() {

			},
			unfixed() {
	
			},

			// tab栏切换
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-view {
		width: 100%;
		background-color: #fff;
	}

	.sticky-content {
		overflow: hidden;
	}

	.u-config-wrap {
		height: 200vh;
	}

	.u-demo-title {
		margin-bottom: 140rpx;
	}

	.sticky {
		background-color: $u-type-primary;
		color: #fff;
		// padding: 24rpx;
		margin: auto;
		font-size: 28rpx;
		line-height: 1;
		border-radius: 5px;
	}

	.u-navbar {
		background-color: #007AFF;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
	}

	.input-view {
		background-color: #fff;
		width: 100%;
		border-radius: 88rpx;
		height: 60rpx;
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
	
	.listContent {
	
		.list-item {
			// height: 226rpx;
			padding: 20rpx 0;
			// background-color: #007AFF;
		}
	
		.list-item-content {
	
			height: 100%;
			padding: 0 20rpx;
	
			.list-item-titleContent {
	
				width: 100%;
				height: 100%;
	
				position: relative;
	
				.list-item-bottom {
	
					position: absolute;
					bottom: 0rpx;
					right: 0rpx;
					width: 100%;
				}
			}
		}
	}
	
</style>
